<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备维护 - 智能制造分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: { DEFAULT: '#1890ff' },
                        success: { DEFAULT: '#52c41a' },
                        warning: { DEFAULT: '#faad14' },
                        error: { DEFAULT: '#f5222d' }
                    }
                }
            }
        }
    </script>
    <style>
        .ant-layout { min-height: 100vh; }
        .ant-layout-sider { background: #001529; }
        .ant-menu { background: transparent; }
        .ant-menu-item { color: rgba(255,255,255,0.65); }
        .ant-menu-item:hover { color: #fff; }
        .ant-menu-item-selected { color: #fff; background: #1890ff; }
        .ant-card { border-radius: 2px; border: 1px solid #f0f0f0; }
        .ant-card-head { border-bottom: 1px solid #f0f0f0; padding: 16px 24px; }
        .ant-table { border-radius: 2px; }
        .ant-table-thead > tr > th { background: #fafafa; font-weight: 500; }
        .ant-btn { border-radius: 2px; box-shadow: 0 2px 0 rgba(0,0,0,0.015); }
        .ant-alert { border-radius: 2px; }
    </style>
</head>
<body class="bg-[#f0f2f5]">
<div class="ant-layout">
    <!-- 侧边栏 -->
    <aside class="fixed inset-y-0 left-0 w-64 bg-[#001529] text-white">
        <div class="flex flex-col h-full">
            <div class="flex items-center justify-center h-16 border-b border-white/10">
                <i class="fas fa-industry text-primary-400 text-2xl"></i>
                <span class="ml-2 text-xl font-medium">智能制造分析</span>
            </div>
            <nav class="flex-1 px-4 py-4 space-y-1">
                <a href="dashboard.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-chart-line w-5 h-5"></i>
                    <span class="ml-3">生产监控</span>
                </a>
                <a href="yield_analysis.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-chart-pie w-5 h-5"></i>
                    <span class="ml-3">良率分析</span>
                </a>
                <a href="equipment_maintenance.html" class="flex items-center px-4 py-2 text-white bg-primary-500 rounded">
                    <i class="fas fa-tools w-5 h-5"></i>
                    <span class="ml-3">设备维护</span>
                </a>
                <a href="data_source.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-database w-5 h-5"></i>
                    <span class="ml-3">数据源配置</span>
                </a>
                <a href="system_settings.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-cog w-5 h-5"></i>
                    <span class="ml-3">系统设置</span>
                </a>
            </nav>
        </div>
    </aside>
    <!-- 主内容区 -->
    <main class="ml-64 p-8">
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-medium text-gray-900">设备维护</h1>
            <div class="flex items-center space-x-4">
                <button class="inline-flex items-center px-4 py-2 border border-transparent rounded shadow-sm text-sm font-medium text-white bg-primary-500 hover:bg-primary-600">
                    <i class="fas fa-plus mr-2"></i> 新增维护计划
                </button>
            </div>
        </div>
        <!-- 数据概览卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded border border-gray-200 p-6 shadow-sm">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-primary-50 text-primary-500">
                        <i class="fas fa-cogs text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-500">设备总数</p>
                        <p class="text-2xl font-medium text-gray-900">128</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded border border-gray-200 p-6 shadow-sm">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-success-50 text-success-500">
                        <i class="fas fa-check-circle text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-500">运行中</p>
                        <p class="text-2xl font-medium text-gray-900">98</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded border border-gray-200 p-6 shadow-sm">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-warning-50 text-warning-500">
                        <i class="fas fa-tools text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-500">维护中</p>
                        <p class="text-2xl font-medium text-gray-900">15</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded border border-gray-200 p-6 shadow-sm">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-error-50 text-error-500">
                        <i class="fas fa-exclamation-triangle text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-500">故障</p>
                        <p class="text-2xl font-medium text-gray-900">3</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 预警信息 -->
        <div class="bg-error-50 border-l-4 border-error-500 p-4 mb-8">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-error-500"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-error-700">
                        <strong>紧急：</strong> 设备A-001出现重复性缺陷，需要立即维护
                    </p>
                </div>
            </div>
        </div>
        <!-- 图表区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <div class="bg-white rounded border border-gray-200 shadow-sm">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-gray-900">设备状态监控</h3>
                    </div>
                </div>
                <div class="p-6">
                    <div id="equipmentStatusChart" class="h-80"></div>
                </div>
            </div>
            <div class="bg-white rounded border border-gray-200 shadow-sm">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-gray-900">维护计划</h3>
                        <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-sync-alt mr-2"></i> 刷新
                        </button>
                    </div>
                </div>
                <div class="p-6 overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备编号</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上次维护时间</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">计划维护时间</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">维护类型</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">A-001</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-15</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-25</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">定期保养</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-warning-50 text-warning-600">待维护</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <button class="text-primary-500 hover:text-primary-600"><i class="fas fa-play mr-1"></i>开始维护</button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">B-002</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-18</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-28</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">定期保养</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-warning-50 text-warning-600">待维护</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <button class="text-primary-500 hover:text-primary-600"><i class="fas fa-play mr-1"></i>开始维护</button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">C-003</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-20</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-20</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">故障维修</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-success-50 text-success-600">维护中</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <button class="text-primary-500 hover:text-primary-600"><i class="fas fa-eye mr-1"></i>查看详情</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- 故障记录 -->
        <div class="bg-white rounded border border-gray-200 shadow-sm">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">故障记录</h3>
                <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-sync-alt mr-2"></i> 刷新
                </button>
            </div>
            <div class="p-6 overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备编号</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">故障时间</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">故障类型</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">故障描述</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">处理状态</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">处理时间</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">A-001</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-20 14:30</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">机械故障</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">轴承异常磨损</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-success-50 text-success-600">已处理</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-20 16:45</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">B-002</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-20 10:15</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">电气故障</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">电机过热保护</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-warning-50 text-warning-600">处理中</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">C-003</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-19 16:45</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">控制系统故障</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PLC通信中断</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-success-50 text-success-600">已处理</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-19 18:30</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</div>
<script>
    // 设备状态图表
    var equipmentStatusChart = echarts.init(document.getElementById('equipmentStatusChart'));
    var option = {
        title: { text: '设备状态分布', left: 'center' },
        tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
        legend: { orient: 'vertical', left: 'left', data: ['运行中', '维护中', '故障'] },
        series: [{
            name: '设备状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
            label: { show: false, position: 'center' },
            emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } },
            labelLine: { show: false },
            data: [
                { value: 98, name: '运行中', itemStyle: { color: '#52c41a' } },
                { value: 15, name: '维护中', itemStyle: { color: '#faad14' } },
                { value: 3, name: '故障', itemStyle: { color: '#f5222d' } }
            ]
        }]
    };
    equipmentStatusChart.setOption(option);
    window.addEventListener('resize', function() {
        equipmentStatusChart.resize();
    });
</script>
</body>
</html> 